import {
  Component,
  OnInit,
  OnDestroy,
  ViewEncapsulation
} from '@angular/core';
import {
  trigger,
  animate,
  transition,
  state,
  style
} from "@angular/animations";
import { Subscription } from "rxjs/Subscription";

const CATE_TIME_SERIES = 0,
  CATE_K = 1,
  CATE_MULTIPLE = 2;

// 通用显示菜单
const CHART_TAB_LIST = [
  {
    cate: CATE_TIME_SERIES,
    text: "今日",
    duration: 1,
    key: 1
  },
  {
    cate: CATE_TIME_SERIES,
    text: "五日",
    duration: 5,
    key: 5
  },
/*
  {
    cate: CATE_K,
    period: "Sec15",
    text: "15秒"
  },
  {
    cate: CATE_K,
    period: "Sec30",
    text: "30秒"
  },
*/
  {
    cate: CATE_K,
    period: "Min60",
    text: "60分"
  },
  {
    cate: CATE_K,
    period: "Day1",
    text: "日K"
  }
];

// 行情全景页面的K线图显示菜单
const BLOCKMINI_CHART_TAB_LIST = [
  {
    cate: CATE_TIME_SERIES,
    text: "今日",
    duration: 1,
    key: 1
  },
  {
    cate: CATE_TIME_SERIES,
    text: "五日",
    duration: 5,
    key: 5
  },
  {
    cate: CATE_K,
    period: "Min1",
    text: "1分钟"
  },
  {
    cate: CATE_K,
    period: "Day1",
    text: "日K"
  },
  {
    cate: CATE_K,
    period: "Day30",
    text: "月K"
  }
];

// 模拟交易的K线图显示菜单
const VTRADE_CHART_TAB_LIST = [
  {
    cate: CATE_TIME_SERIES,
    text: "分时",
    duration: 1,
    key: 1
  },
  {
    cate: CATE_K,
    period: "Sec15",
    text: "15秒"
  },
  {
    cate: CATE_K,
    period: "Sec30",
    text: "30秒"
  },
  {
    cate: CATE_K,
    period: "Min1",
    text: "1分钟"
  },
  {
    cate: CATE_K,
    period: "Min5",
    text: "5分钟"
  },
  {
    cate: CATE_K,
    period: "Min60",
    text: "60分"
  },
  {
    cate: CATE_K,
    period: "Day1",
    text: "日K"
  }
];

@Component({
  // moduleId: module.id,
  selector: 'combo-chart',
  templateUrl: 'combo-chart.component.html',
  styleUrls: ['combo-chart.component.less'],
  encapsulation: ViewEncapsulation.None,
  inputs: [
    "stockSource",
    "kLists",
    "kConfig",
    "withHr",
    "withBg",
    "placementSource"
  ]
})
export class ComboChartComponent implements OnInit, OnDestroy {
  listData;  // = CHART_TAB_LIST;
  placementSource;
  stockSource;
  chartSource;
  currentConfig;
  stockSubscription: Subscription;
  placeSubscription: Subscription;
  place: string;

  constructor() { }

  ngOnInit() {
    this.chartSource = this.stockSource.filter(stock => stock && stock.symbol);
    this.stockSubscription = this.stockSource.subscribe(stock => console.debug("Chart Stock: ", stock));
    this.placeSubscription = this.placementSource.subscribe(place => {
      switch (place) {
        case "vtrade":
          this.place = "vtrade";
          this.listData = VTRADE_CHART_TAB_LIST;
          break;
        case "blockmini":
          this.place = "blockmini";
          this.listData = BLOCKMINI_CHART_TAB_LIST;
          break;
        default:
          this.place = "default";
          this.listData = CHART_TAB_LIST;
          break;
      }
    });
  }

  ngOnDestroy() {
    this.stockSubscription ? this.stockSubscription.unsubscribe() : null;
    this.placeSubscription ? this.placeSubscription.unsubscribe() : null;
  }

}